<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>发布通知</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;line-height: 50px;text-align: center;color:#2bb1ff;font-size: 14px; }
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*内容*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.p-list1{position:relative;display:block;padding:0 18px;margin:10px 0;height:50px;font-size: 14px;}
.p-list1 .left{position: absolute; width: 100px; left:18px;top:0;height: 100%;line-height:50px;}
.p-list1 .right{display:block;padding-left: 100px; width:100%;height:100%;line-height:50px;font-size: 14px; text-align: right;}
/**/
.p-list2{ width: 100%; height: auto; margin:10px 0; background: #fff; }
.p-list2 p{ padding-left:18px; height: 37px; line-height: 37px; font-size: 15px;}
.p-list2 textarea{width: 100%; padding:0 18px; font-size: 15px; font-family: inherit; }
.add-img{  padding-left:18px; padding-bottom: 5px; }
.add-img img{  width: 45px; }
.add-img span{display: inline-block;margin-right: 5px;  width: 45px; height: 45px ; background-repeat:no-repeat; background-size:cover; }
/*提醒开关*/
 .p-list1 .tixing{margin-top: 16px;padding:1px;  height: 18px; width: 35px; border-radius:9px;  background: #ccc; } 
 .tixing span{ float:left; height: 16px;width: 16px;  border-radius:50%; background: #fff; } 
 .p-list1 .t-on{ background: #16a4ff; } 
 .p-list1 .t-on span{ float:right; } 
/*底部信息*/
.botm{  margin: 20px 0;}
.botm a{  display: block; width: 90%; line-height: 45px; margin:0 auto;border-radius: 3px; background: #2bb1ff; color:#fff; 
  text-align: center; font-size: 15px;}
/*辅助类*/
.g-left{padding-right:16px; background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{padding-right:16px; background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{padding-right:16px; background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
.color1{ color: #2bb1ff; }
.color2{ color: #c8c8c8; }
/*标记*/
.p-close{ position: absolute;top:0;right: 0; width:15px;height:15px;
  background: url(../img/xx_03.png) no-repeat ; background-size:15px;}
.p-biaoji{ background:#fff url(../img/bx_03.png) 10px center no-repeat; background-size:9px; }
/*模态框*/
.mo{display: none; position: absolute; top:0; left: 0; z-index: 188;width: 100%;height: 100%;background: rgba(0,0,0,0.5); }
.mo ul{ width: 200px; padding:13px 0; margin:100px auto; border-radius: 5px; background:#fff;overflow: auto;}
.mo a{ display: block; padding-left: 75px; width: 100%; height: 35px;line-height: 35px; font-size: 16px; color: inherit; background: url(../img/qx_03.png) 30px center no-repeat;background-size:20px;}
.mo .active{ background-image: url(../img/xz_03.png);background-size:20px;}

/*日历组件样式更改*/
#layui-laydate1{ width: 100%;left:0 !important; }
.layui-laydate-main{width: 100% !important;}
table{width:100%}
ol{ overflow-y: auto !important; }
</style>
</head>
<body>
<div class="page-container">
    <div class="weui-tab">
           <!-- 头部 -->
            <div class="weui-navbar page-top">
                    <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                    <span class="t-title">班级通知</span>  
                    <a  class="g-other" id="xiao-select">选择</a>
            </div>
            <!-- 内容区 -->
            <div class="weui-tab__bd page-wrap" >

                  <!-- <a class="p-list1 p-biaoji">
                      <span class="left">类型选择</span>
                      <span class="right color2 g-up" id="xiao-select">请选择</span>
                  </a> -->

                  <a class="p-list1 p-biaoji">
                      <span class="left">标题</span>
                      <input class="right" type="text" placeholder="请输入..." id="input1">
                  </a>

                  <div class="p-list2">
                        <p class="p-biaoji">内容</p>
                        <textarea name="" id="textarea1" rows="5" placeholder="请输入通知内容..."></textarea>
                  </div>

                  <div class="p-list2">
                        <p>图片上传</p>
                        <div class="add-img">
                              <input type="file" id="file" style="display: none;" multiple="multiple">
                              <img id="tu-add" src="../img/tadd_03.png" alt="添加图片" onclick="file.click()">
                        </div>
                  </div>

                  <a class="p-list1 p-biaoji">
                      <span class="left">发送时间</span>
                      <input type="text" id="time1" onfocus="this.blur();" class="right">
                  </a>         
                  <a class="p-list1 p-biaoji">
                      <span class="left">提醒</span>
                      <span class="right tixing t-on">
                            <span></span>
                      </span>
                  </a>

                  <div class="botm">
                          <a id="okBtn">提 &nbsp; &nbsp; &nbsp; &nbsp;交</a>
                  </div>
            </div>
      </div>
</div>

<!-- 模态框 -->
<div class="mo" id="xiaoxifabu">
    <ul >
          <li><a class="active" href="###">班级通知</a></li> 
          <li><a  href="###">班级作业</a></li>
          <li><a  href="###">班级考勤</a></li>
          <li><a  href="###">校内通知</a></li>
          <li><a  href="###">消息发布</a></li>
    </ul>
</div>


</body>
<script src="../js/laydate.js"></script>
<script>
var time;
// 时间日期控件
laydate.render({
  elem: '#time1',
  type: 'datetime', 
  format:"yyyy/MM/dd HH:mm",
  min: 0,              //最小值为当前时间
  ready:function(data){ 
     // 在打开时触发
  },
  change:function(value,date,endDate){
    console.log(value); //得到日期生成的值，如：2017-08-18
    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  },
  done:function(value,date,endDate){
        time = value ;
        console.log(time);
        console.log(date);
  }
});

  //"选择" 按钮
$("#xiao-select").click(function(){
    $("#xiaoxifabu").toggle();
    return false;
})

$(".mo").find('a').click(function(){
    $("#xiao-select").prev().text(this.innerHTML);
    $(".mo").hide();
})
$(".mo").find("a").click(function(){
     $(this).parent().parent().find("a").removeClass("active");
     $(this).addClass("active")
})
$(document).click(function(){ $(".mo").hide(); })

// 图片上传
$("#file").on("change",function(){
    var fileName = this.value;   
    if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {   
        alert('您上传的图片格式不正确，请重新选择！');   
        return false;   
    }   
    // console.log(this.files )
    // var file = this.files[0]; 
    for(var i=0; i<this.files.length; i++){
          var file = this.files[i];
          if (!!file) {  
                var img= document.createElement("span");    
                $(this).parent().prepend(img); 
                var myURL = window.URL || window.webkitURL;
                var url=myURL.createObjectURL(file);
                img.style.backgroundImage="url("+url+")";
                // img.src=myURL.createObjectURL(file);
                $(img).click(function(){ 
                       var t = this ;
                       $.confirm("是否删除图片", function() {
                              $(t).remove();
                              $("#file").val('');
                        }, function() {
                              //点击取消后的回调函数
                        }); 
                 })
          }
    } 
})

// 提醒点击
$(".tixing").click(function(){
     if($(this).hasClass("t-on")){
          $(this).removeClass("t-on")
     }else{
          $(this).addClass("t-on");
     }
})

//发布通知      [状态管理]
var  type,title,text,time;
$("#okBtn").click(function(){
     if( $("#xiao-select").text() === "请选择" ){
            alert("请选择通知类型!");
            return;
     }else{
            title = $("#xiao-select").prev().text();
     }
     if( !$("#input1").val() ){
            alert("请选填写标题!");
            return;
     }else{
            type = $("#input1").val();
     }
     if( !$("#textarea1").val() ){
            alert("请选填写通知内容!");
            return;
     }else{
            text = $("#textarea1").val();
     }
     if( !time ){
            alert("请选择发送时间!");
            return;
     }
    var obj = [
          {
             href:"../otherpages/mytongzhi.html",
              type:type,
              title:title,
              text:text,
              time:time        
          }
    ];
    var datas = sessionStorage.data;
    if( !!datas){
         var arr =$.parseJSON(datas);
         arr.push(obj[0]);
         sessionStorage.data = JSON.stringify(arr);
    }else{
         sessionStorage.data = JSON.stringify(obj);
    }
    // console.log( sessionStorage.data ) 
      this.href="../../index.html";
})



</script>
</html>